<template>
  <div class="component-transition p-8 h-full">
    <div class="flex flex-col md:flex-row items-start gap-6">
      <div class="w-full md:w-1/3 bg-pink-100 p-6 rounded-lg">
        <i class="fa fa-cog text-6xl text-accent mb-4"></i>
        <h2 class="text-2xl font-bold mb-2">设置组件</h2>
        <p class="text-gray-600">配置系统参数和个性化选项。</p>
      </div>
      <div class="w-full md:w-2/3">
        <h3 class="text-xl font-semibold mb-4">系统设置</h3>
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span>深色模式</span>
            <label class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" class="sr-only peer" v-model="darkMode">
              <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-accent/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent"></div>
            </label>
          </div>
          <div class="flex items-center justify-between">
            <span>通知提醒</span>
            <label class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" class="sr-only peer" v-model="notifications" checked>
              <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-accent/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent"></div>
            </label>
          </div>
          <div class="pt-4">
            <label class="block mb-2 font-medium">语言设置</label>
            <select class="border border-gray-300 rounded-lg px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-accent/50">
              <option>简体中文</option>
              <option>English</option>
              <option>日本語</option>
            </select>
          </div>
        </div>
        <button class="mt-6 bg-accent text-white px-4 py-2 rounded hover:bg-accent/90 transition-colors">
          保存设置
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, defineEmits, ref } from 'vue'

const emit = defineEmits(['mounted', 'unmounted'])
const darkMode = ref(false)
const notifications = ref(true)

onMounted(() => {
  emit('mounted', 'SettingsComponent', 'mounted')
})

onUnmounted(() => {
  emit('unmounted', 'SettingsComponent', 'unmounted')
})
</script>